<script setup>
import { reactive, ref } from 'vue';
import { ElMessage } from 'element-plus'
let form = reactive({
  key: null,
  alert: true,
  answer: false,
  play: true
})
let formRef = ref()

const setting = JSON.parse(localStorage.getItem("setting"))
if (setting) {
  form = reactive(setting)
}else{
  //初始化设置
  localStorage.setItem('setting', JSON.stringify(form));
}

const updateSetting = () => {
  MultiPageEventBus.emit('updateSetting', JSON.stringify(form))
}

const rules = {
  key: [{
    required: true, trigger: 'blur', message: "题库密钥不能为空"
  }]
}
</script>

<template>
  <div id="hero-page" class="learn-helper-page-tag" style="display: none">
    <div class="helper-popup no-summary">
      <div class="helper-head">
        <div class="title">💕💕💕</div>
        <div class="welcome"><span class="icon"><img
              src="https://whaty-learnspace.webtrncdn.com/kckj/learnspace/v6.7.14.2024032101--RC/resource/template/learnhelper/images/icons/icon-pointup.png"></span><span
            class="text">欢迎使用苏大成教助手</span></div><a href="javascript:;" onclick="closeLearnHelper()"
          class="btn btn-icon shut-btn"><i class="whaty spacefont-cross-simple"></i></a>
      </div>
      <div class="helper-chat-wrap" id="chat-list-container">
        <el-form ref="formRef" style="padding:10px" :model="form" :rules="rules">
          <el-form-item label="关闭30分钟提醒">
            <el-switch v-model="form.alert" @change="updateSetting" />
          </el-form-item>
          <el-form-item label="自动播放">
            <el-switch v-model="form.play" @change="updateSetting" />
          </el-form-item>
          <el-form-item label="自动答题（完善中...）">
            <el-switch v-model="form.answer" disabled @change="updateSetting" />
          </el-form-item>
          <el-form-item v-if="form.answer" prop="key" label="题库密钥">
            <el-input v-model="form.key" />
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
